<template>
  <!-- 单本书 -->
  <div class="book">
    <!-- top -->
    <van-nav-bar left-arrow @click-left="$router.go(-1)" />
    <div v-if="!loading" class="body">
      <!-- 第一块 -->
      <div class="book-gist">
        <div class="book-gist-left">
          <h2 class="book-name">{{ BookItemData.name }}</h2>
          <p class="book-author">
            <span class="label">作者</span>
            <span class="describe">{{ BookItemData?.authorNameString }}</span>
          </p>
          <p class="book-translator">
            <span class="label">译者</span>
            <span class="describe">{{
              BookItemData?.translatorNameString
            }}</span>
          </p>
          <div class="book-labels">
            <span class="label">标签</span>
            <div class="label-right">
              <span
                class="describe"
                v-for="t in BookItemData.tags"
                :key="t.id"
                >{{ t.name }}</span
              >
            </div>
          </div>
          <div class="book-info">
            <span class="label">简介</span>
            <div class="book-info-main">
              <span class="describe" :class="isZoomA == 1 ? 'is-zoom' : ''">{{
                BookItemData.abstract
              }}</span>
              <span class="zoom" @click="isZoomA = 1" v-show="isZoomA == 0"
                >+展开</span
              >
              <span class="zoom" @click="isZoomA = 0" v-show="isZoomA == 1"
                >-收起</span
              >
            </div>
          </div>
        </div>
        <div class="book-gist-right">
          <div class="img">
            <img
              :src="`https://file.ituring.com.cn/SmallCover/${imgs}`"
              alt=""
            />
          </div>
          <div class="reading">
            <span class="title">阅读</span>
            <span class="detail">{{ viewCount }}</span>
          </div>
          <div class="recommend">
            <span class="title">推荐</span>
            <span class="detail">{{ BookItemData.voteCount }}</span>
          </div>
        </div>
      </div>
      <!-- 第三块 -->
      <div class="book-main">
        <!-- 导航条 -->
        <div class="main-nav">
          <span
            class="nav-item"
            :class="navLight == 0 ? 'active' : ''"
            @click="navLight = 0"
            >介绍</span
          >
          <span
            class="nav-item"
            :class="navLight == 1 ? 'active' : ''"
            @click="navLight = 1"
            >相关内容</span
          >
          <span
            class="nav-item"
            :class="navLight == 2 ? 'active' : ''"
            @click="navLight = 2"
            >评价</span
          >
          <span
            class="nav-item"
            :class="navLight == 3 ? 'active' : ''"
            @click="toErr()"
            >勘误</span
          >
          <span
            class="nav-item"
            :class="navLight == 4 ? 'active' : ''"
            @click="navLight = 4"
            >随书下载</span
          >
        </div>
        <!-- 内容 -->
        <div class="main-contain">
          <!-- 介绍 -->
          <div v-show="navLight == 0" class="contain-intro">
            <!-- 特别说明 -->
            <h4 v-if="BookItemData.briefIntro?.specialNotes">特别说明</h4>
            <div class="briefIntro">
              <div
                class="Intro-a"
                v-html="BookItemData.briefIntro?.specialNotes"
              ></div>
            </div>
            <!-- 本书特色 -->
            <h4>本书特色</h4>
            <div class="briefIntro">
              <div class="brief-p" :class="isZoomB == 1 ? 'is-zoom' : ''">
                <p v-for="(h, i) in highlightArr" :key="i">
                  {{ h }}
                </p>
              </div>
              <span class="zoom" @click="isZoomB = 1" v-show="isZoomB == 0"
                >+展开</span
              >
              <span class="zoom" @click="isZoomB = 0" v-show="isZoomB == 1"
                >-收起</span
              >
            </div>
            <!-- 目录 -->
            <h4>目录</h4>
            <div class="briefIntro">
              <!-- BookItemData.ebook 存在 -->
              <template v-if="BookItemData.ebook">
                <p
                  class="book-cata-item"
                  v-for="c in BookItemData.ebook?.chapters"
                  :key="c.id"
                  :class="c.isFree ? 'free' : ''"
                  @click="toread(c.isFree, c.id, c.subject)"
                >
                  {{ c.subject }}
                  <span class="read" v-if="c.isFree">阅读</span>
                </p>
              </template>
              <!-- BookItemData.ebook 不存在 -->
              <template v-else>
                <div class="book-cata" v-html="BookItemData.contentTable"></div>
              </template>
            </div>
            <!-- 作译者介绍 -->
            <h4>作译者介绍</h4>
            <div class="briefIntro">
              <div class="Intro" :class="isZoomC == 1 ? 'is-zoom' : ''">
                {{ BookItemData.briefIntro?.authorInfo }}
              </div>
              <span class="zoom" @click="isZoomC = 1" v-show="isZoomC == 0"
                >+展开</span
              >
              <span class="zoom" @click="isZoomC = 0" v-show="isZoomC == 1"
                >-收起</span
              >
            </div>
            <!-- 出版信息 -->
            <h4>出版信息</h4>
            <div class="briefIntro">
              <div class="publish-item">
                <span class="label">书名</span>
                <span class="text">{{ BookItemData.name }}</span>
              </div>
              <div class="publish-item">
                <span class="label">系列书名</span>
                <span class="text">{{ BookItemData.bookCollectionName }}</span>
              </div>
              <div class="publish-item">
                <span class="label">执行编辑</span>
                <span class="text">{{ BookItemData.deputyEditor?.name }}</span>
              </div>
              <div class="publish-item">
                <span class="label">出版日期</span>
                <span class="text">{{
                  BookItemData.publishDate?.substring(0, 10)
                }}</span>
              </div>
              <div class="publish-item">
                <span class="label">书号</span>
                <span class="text">{{ BookItemData.isbn }}</span>
              </div>
              <div class="publish-item">
                <span class="label">定价</span>
                <span class="text">{{
                  BookItemData.bookEditionPrices
                    ? BookItemData.bookEditionPrices[0].name
                    : ""
                }}</span>
              </div>
              <div class="publish-item">
                <span class="label">页数</span>
                <span class="text">{{
                  BookItemData.paperEditionInfo?.pageNumber
                }}</span>
              </div>
              <div class="publish-item">
                <span class="label">印刷方式</span>
                <span class="text">{{
                  BookItemData.paperEditionInfo?.bookPrintName
                }}</span>
              </div>
              <div class="publish-item">
                <span class="label">开本</span>
                <span class="text">{{
                  BookItemData.paperEditionInfo?.pageSizeName
                }}</span>
              </div>
              <div class="publish-item">
                <span class="label">出版状态</span>
                <span class="text">{{ BookItemData.canBeSaled }}</span>
              </div>
              <div class="publish-item">
                <span class="label">原书名</span>
                <span class="text">{{
                  BookItemData.originalBookInfo?.originalBookName
                }}</span>
              </div>
              <div class="publish-item">
                <span class="label">原书号</span>
                <span class="text">{{
                  BookItemData.originalBookInfo?.originalBookIsbn
                }}</span>
              </div>
            </div>
          </div>
          <!-- 相关 -->
          <div v-show="navLight == 1" class="contain-relevant">
            <h4>大家也喜欢</h4>
            <div class="relevant-book">
              <BookItemA
                v-for="r in BookItemData.relatedBooks"
                :key="r.id"
                :id="r.id"
                :book-name="r.name"
                :book-authors="r.authors"
                :cover-key="r.coverKey"
              />
              <!-- {{  BookItemData.relatedBooks }} -->
            </div>
          </div>
          <!-- 评论 -->
          <div v-show="navLight == 2" class="contain-comment">内容维护中</div>
          <!-- 勘误 -->
          <div v-show="navLight == 3" class="contain-err">勘误</div>
          <!-- 下载 -->
          <div v-show="navLight == 4" class="contain-download">
            <div
              class="download-item"
              v-for="d in BookItemData.resources"
              :key="d.id"
              @click="show = true"
            >
              <span class="name">{{ d.name }}</span>
              <span class="size">{{ d.sizeString }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 弹出框 -->
      <van-dialog
        v-model="show"
        title="您未设置推送邮箱"
        :show-cancel-button="true"
        :before-close="beforeClose"
      >
        <van-field v-model="email" placeholder="请填写有效的推送邮箱" />
      </van-dialog>
    </div>
    <div v-if="loading" class="loading">
      <van-loading size="24px" vertical>加载中...</van-loading>
    </div>
    <!-- bottom -->
    <div class="book-bottom">
      <van-goods-action>
        <van-goods-action-icon icon="fire-o" :text="BookItemData.userVote?'已推荐':'推荐'" @click="vote" />
        <van-goods-action-icon icon="star-o" :text="BookItemData.userFav?'已收藏':'收藏'" @click="fav" />
        <van-goods-action-button color="#2c59b7" text="购书袋" to="/cart" />
        <van-goods-action-button
          color="#eeac57"
          :text="ownBook"
          @click="postBook"
        />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { Toast } from "vant";
import BookItemA from "@/components/BookItem-A.vue";
import { BookItemAPI, CartBuyAPI, BookVoteAPI, BookFavAPI } from "../apis";
export default {
  props: ["id"],
  data() {
    return {
      loading: true,
      // 接受网络请求到的数据
      BookItemData: {},
      // 展开 收起 状态
      isZoomA: 0,
      // 展开 收起 状态
      isZoomB: 0,
      // 展开 收起 状态
      isZoomC: 0,
      // 导航条高亮状态
      navLight: 0,
      // 弹出框是否显示
      show: false,
      // 邮箱
      email: "",
    };
  },
  mounted() {
    this.loading = true
    this.getBookItem();
  },
  beforeRouteUpdate(to, from, next) {
    next();
    if (to.fullPath != from.fullPath) {
      // 等待页面渲染完毕
      this.$nextTick(() => {
        this.getBookItem();
      });
    }
  },
  computed: {
    // 特色文字解读
    highlightArr() {
      return this.BookItemData.briefIntro?.highlight.split("\r\n");
    },
    // 等待图片加载
    imgs() {
      return this.BookItemData.coverKey ? this.BookItemData.coverKey : "";
    },
    // 阅读量
    viewCount() {
      if (this.BookItemData.viewCount >= 1000) {
        let num = (this.BookItemData.viewCount / 1000).toFixed(1);
        return num + "K";
      }
      return this.BookItemData.viewCount;
    },
    // 是否拥有
    ownBook() {
      if (this.BookItemData.ownTheEbook) {
        return "已经拥有";
      } else {
        return "购买";
      }
    },
    // 是否推荐
    isFav() {
      if (this.BookItemData.userFav) {
        return "UnFav";
      } else {
        return "Fav";
      }
    },
    // 是否收藏
    isVote() {
      if (this.BookItemData.userVote) {
        return "UnVote";
      } else {
        return "Vote";
      }
    },
  },
  methods: {
    // 网络请求
    async getBookItem() {
      let { data } = await this.$http(BookItemAPI + this.id, {
        headers: {
          Authorization:
            "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
        },
      });
      this.BookItemData = data;
      this.$nextTick(() => {
        this.loading = false
      })
    },
    // 发送网络请求(购买)
    async postBook() {
      await this.$http.post(
        CartBuyAPI(this.id, 4),
        {},
        {
          headers: {
            Authorization:
              "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
          },
        }
      )
      Toast('已加入购书袋');
    },
    // 发送网络请求(推荐)
    async postVote() {
      await this.$http.post(
        BookVoteAPI(this.isVote,this.id),
        {},
        {
          headers: {
            Authorization:
              "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
          },
        }
      );
    },
    // 发送网络请求(收藏)
    async postFav() {
      await this.$http.post(
        BookFavAPI(this.isFav,this.id),
        {},
        {
          headers: {
            Authorization:
              "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
          },
        }
      );
    },
    // to error
    toErr() {
      this.navLight = 3;
      this.$router.push({
        name: "error",
        params: {
          errId: this.id,
        },
      });
    },
    // to read
    toread(status, id, name) {
      if (status) {
        this.$router.push({
          name: `read`,
          params: {
            id: id,
            name: name,
          },
        });
      }
    },
    // 
    beforeClose(action, done) {
      // 点击事件 - 备注按钮提示框
      if (action === "confirm") {
        // 确认
        // console.log(this.email);
        // 正则表达式
        // linshiyan4@qq.com
        let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if (reg.test(this.email)) {
          // 弹窗
          Dialog.alert({
            message: "已发送到您的推送邮箱",
          });
          done();
        } else {
          Toast("请输入正确的邮箱");
          done(false);
        }
      } else if (action === "cancel") {
        // 取消
        console.log("[点击事件 - 备注] - 取消");
        done(); // 关闭提示框
      }
    },
    // 推荐 与 收藏
    vote() {
      this.postVote()
      this.getBookItem()
      
    },
    fav() {
      this.postFav()
      this.getBookItem()
    },
  },
  components: {
    BookItemA,
    //
    [Dialog.Component.name]: Dialog.Component,
  },
};
</script>

<style lang="scss" scoped>
.book {
  position: relative;
  width: 100vw;
  background-color: #fff;
  z-index: 999;
  // top
  .van-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
  }

  // body
  .body {
    padding-top: 55px;
    .book-gist {
      padding: 0 15px 15px;
      display: flex;
      .book-gist-left {
        .book-name {
          max-width: 220px;
          max-height: 50px;
          overflow: hidden;
          text-overflow: ellipsis;
          color: var(--book-name-font-black);
          font-size: 20px;
          font-weight: bolder;
          line-height: 25px;
        }
        .book-author,
        .book-translator,
        .book-info {
          display: flex;
          margin-top: 5px;
          .label {
            display: block;
            max-width: 28px;
            color: var(--more-font-grey);
            font-size: 14px;
            line-height: 20px;
            margin-right: 10px;
          }
          .describe {
            display: block;
            max-width: 182px;
            color: var(--more-font-grey);
            font-size: 14px;
            line-height: 20px;
            // 超出3行省略号
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            -webkit-box-orient: vertical;
            &.is-zoom {
              // 超出999行省略号
              -webkit-line-clamp: 999;
              line-clamp: 999;
            }
          }
          .zoom {
            color: var(--theme-blue);
            font-size: 14px;
          }
        }
        .book-labels {
          margin-top: 5px;
          max-width: 220px;
          display: flex;
          flex-wrap: wrap;
          .label {
            display: block;
            max-width: 28px;
            color: var(--more-font-grey);
            font-size: 14px;
            line-height: 20px;
            margin-top: 6px;
            margin-right: 10px;
          }
          .label-right {
            display: flex;
            flex-wrap: wrap;
            max-width: 182px;
            .describe {
              color: var(--theme-blue);
              background-color: var(--blue-tag-bg-blue);
              font-size: 12px;
              line-height: 20px;
              max-height: 20px;
              padding: 2px 10px;
              border-top-right-radius: 10px;
              border-bottom-right-radius: 10px;
              margin: 5px 5px 0 0;
            }
          }
        }
      }
      .book-gist-right {
        .img {
          img {
            width: 110px;
            height: 154px;
            margin-left: 15px;
            margin-bottom: 5px;
          }
        }
        .reading,
        .recommend {
          margin-left: 15px;
          max-width: 108px;
          padding: 5px 10px;
          border: 1px solid #dae1e7;
          .title,
          .detail {
            color: var(--course-teacher-grey);
            font-size: 14px;
          }
          .detail {
            margin-left: 5px;
          }
        }
        .recommend {
          border-top: none;
        }
      }
    }
    .book-main {
      padding-bottom: 70px;
      // 导航条
      .main-nav {
        padding: 15px 15px 0;
        display: flex;
        border-bottom: 1px solid var(--more-bg-white);
        .nav-item {
          padding-bottom: 15px;
          margin-right: 20px;
          color: var(--book-name-font-black);
          font-size: 14px;
          &.active {
            font-weight: bold;
            border-bottom: 2px solid var(--theme-blue);
          }
        }
      }
      //
      .main-contain {
        padding: 0 15px;
        // 介绍
        .contain-intro {
          margin-top: 20px;
          h4 {
            color: var(--book-name-font-black);
            font-size: 16px;
            margin-top: 20px;
            margin-bottom: 15px;
            padding-left: 10px;
            border-left: 4px solid var(--theme-blue);
          }
          .briefIntro {
            .brief-p {
              color: var(--more-font-grey);
              font-size: 0.875rem;
              line-height: 20px;
              letter-spacing: normal;
              font-style: normal;
              font-weight: 400;
              padding-left: 15px;
              white-space: pre-line;
              // 超出3行省略号
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              line-clamp: 3;
              -webkit-box-orient: vertical;
              &.is-zoom {
                // 超出999行省略号
                -webkit-line-clamp: 999;
                line-clamp: 999;
              }
            }
            .zoom {
              color: var(--theme-blue);
              font-size: 14px;
            }
            p.book-cata-item {
              position: relative;
              color: #000;
              font-size: 14px;
              line-height: 20px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              padding: 15px 15px 15px 0;
              border-top: 1px solid var(--more-bg-white);
              &.free {
                color: var(--theme-blue);
              }
              .read {
                background-color: var(--more-bg-white);
                color: var(--more-font-grey);
                padding: 0 8px;
                position: absolute;
                right: 0;
              }
            }
            // 特色说明
            div.Intro-a {
              color: var(--more-font-grey);
              font-size: 14px;
              padding-left: 15px;
              line-height: 20px;
              img {
                width: 330px;
                height: 111px;
              }
            }
            div.Intro {
              color: var(--more-font-grey);
              font-size: 14px;
              padding-left: 15px;
              line-height: 20px;
              //超出两行省略号
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 4;
              line-clamp: 4;
              -webkit-box-orient: vertical;
              img {
                width: 330px;
                height: 111px;
              }
              &.is-zoom {
                // 超出999行省略号
                -webkit-line-clamp: 999;
                line-clamp: 999;
              }
            }
            div.publish-item {
              display: flex;
              margin-bottom: 10px;
              span.label {
                display: block;
                width: 56px;
                color: var(--more-font-grey);
                font-size: 14px;
                line-height: 1.5;
                margin-left: 15px;
                // 左右两端对齐
                text-align: justify;
                text-justify: distribute-all-lines; // 兼容ie浏览器
                text-align-last: justify;
              }
              span.text {
                display: block;
                padding-left: 15px;
                max-width: 259px;
                color: var(--more-font-grey);
                font-size: 14px;
                line-height: 1.5;
              }
            }
            // 图片太大??
            img {
              max-width: 330px;
              max-height: 117px;
            }
            //
            .book-cata {
              line-height: 40px;
              font-size: 15px;
              color: #000;
            }
          }
        }
        // 相关
        .contain-relevant {
          h4 {
            color: var(--title-font-black);
            font-size: 16px;
            margin: 20px 0 15px;
          }
          .relevant-book {
            display: flex;
            flex-wrap: wrap;
          }
        }
        // 评论
        .contain-comment {
        }
        // 勘误
        .contain-err {
        }
        // 下载
        .contain-download {
          .download-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 15px 10px 0;
            span.name {
              display: block;
              max-width: 250px;
              line-height: 20px;
              color: var(--theme-blue);
              font-size: 12px;
              margin-right: 15px;
            }
            span.size {
              display: block;
              min-width: 70px;
              max-height: 25px;
              line-height: 25px;
              font-size: 14px;
              color: var(--more-font-grey);
              background-color: #e6e6e6;
              padding: 0 5px;
            }
          }
        }
      }
    }
  }
  // bottom
  .book-bottom {
    .van-goods-action {
      .van-goods-action-icon {
        padding: 0 20px;
      }
      .van-button {
        width: 90px;
        height: 50px;
      }
      .van-goods-action-button--first,
      .van-goods-action-button--last {
        border-radius: 0;
        margin-right: 0;
      }
    }
  }
}

// 弹出框
.van-dialog {
  .van-dialog__header {
    padding: 0;
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
    text-align: left;
  }
  .van-dialog__content {
    .van-field__control {
      margin: 24px 0;
      padding: 8px 0;
    }
  }
}
</style>